<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box1{width: 100px;height: 100px;background-color: red;position: absolute;left: 0;top:0;}
    .box2{width: 100px;height: 100px;background-color: green;position: absolute;left: 0;top:110px;}
    .line{width: 1px;height: 500px;background: black;position: absolute;left: 500px;top:0;}
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="line"></div>
</body>
<script>
  const box1 = document.querySelector(".box1");
  const box2 = document.querySelector(".box2");

  box1.onclick = function(){
    move(box1, 500);
  }

  box2.onclick = function(){
    move(box2, 400);
  }

  // 封装1：将元素和目标作为参数，传入函数
  function move(ele, target){
    // 给每个元素身上绑定自己独立的计时器，元素之间互不干扰
    if(ele.t) return;
    // 给每个元素身上绑定自己独立的计时器，元素之间互不干扰
    ele.t = setInterval(()=>{
      // 步长：每次剩下距离的10分之一，注意取整
      let speed = (target - ele.offsetLeft)/10;
      speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
      // 缓冲运动绝对可以到达目标
      if( target === ele.offsetLeft ){
        // 给每个元素身上绑定自己独立的计时器，元素之间互不干扰
        clearInterval(ele.t);
        // 给每个元素身上绑定自己独立的计时器，元素之间互不干扰
        ele.t = undefined;
      }else{
        ele.style.left = ele.offsetLeft + speed + "px";
      }
    }, 30);
  }
  
</script>
</html>